<template>
  <view class="home">
    <MyHeader title="推荐"></MyHeader>

    <swiper class="home-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
      <swiper-item  v-for="item in bannerList" :key="item._id">
		  <image :src="item.picurl" mode="" @click="jumpRouter(item.url)"></image>
       
      </swiper-item>
    </swiper>

    <view class="announcement">
      <view class="left">
        <image class="icon" src="../../static/images/icons/announcement.png" mode=""></image>
        <text>公告</text>
      </view>

      <swiper class="announcement-swiper" :autoplay="true" :interval="3000" :duration="1000" vertical circular>
        <swiper-item v-for="item in announcementList" :key="item._id">
          <view class="swiper-item" >
			  <navigator :url="`/pages/announcement/announcement?id=${item._id}`">
				  {{item.title}}
			  </navigator>
		  </view>
        </swiper-item>
       
      </swiper>
      <uni-icons type="right"></uni-icons>
    </view>


    <view class="recommand subject-item">
      <view class="header">
        <view class="title">每日推荐</view>
        <view>
          <uni-icons size="24" type="calendar" color="#1DB98B"></uni-icons>
          <text>{{dayjs(Date.now()).format('DD')}}号</text>
        </view>
      </view>
      <view class="content">
        <scroll-view scroll-x class="scroll-x-view">
          <view v-for="item in recommandList" :key="item._id" @click="goDetail(item._id,recommandList.map(_item=>_item._id))">
            <image :src="item.smallPicurl" mode="heightFix"></image>
          </view>
        </scroll-view>
      </view>
    </view>


    <view class="subject subject-item">
      <view class="header">
        <view class="title">专题精讲</view>
        <view>
          <navigator open-type="reLaunch" url="/pages/classify/classify">More+</navigator>
        </view>
      </view>
      <view class="content">
        <MyCardItem v-for="(item,index) in subjectItems" :key="index" :content="item" class="item"></MyCardItem>
		<view class="card-item" @click="reLaunchClassify">
		
		<image src="https://mp-0cb878b7-99ec-44ea-8246-12b123304b05.cdn.bspapp.com/xxmBizhi/20240221/1708500433657_4682.jpg" mode="widthFix"></image>
			<view>
				<uni-icons color="#fff" size="32" type="more"></uni-icons>
				<text>更多</text>
			</view>
		</view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { request } from '../../utils';
import dayjs from 'dayjs';

const announcementList = ref([])
const bannerList = ref([])
const recommandList = ref([])

  const subjectItems = ref([])
  
	  
  onShareAppMessage(()=>({
	  title:'米粒壁纸',
	  path:'/page/home/home'
  }))
  
  
  /**
   * 进入壁纸详情页面
   */
  const goDetail = (id,ids)=>{
  	  
	  uni.setStorageSync('previewList',recommandList.value)
	  
	  uni.navigateTo({
	  	url:`/pages/preview/preview?id=${id}`
	  })
  }
  
  const reLaunchClassify = ()=>{
	  uni.reLaunch({
	  	url:'/pages/classify/classify'
	  })
  }
  
  const jumpRouter = (params)=>{
	  uni.navigateTo({
	  	url:'/pages/classifyDetail/classifyDetail?'+params
	  })
  }
  
const getAnnouncementList = ()=>{
	request({
		url:'https://tea.qingnian8.com/api/bizhi/wallNewsList',
		data:{
			select:true,
		}
	}).then(res=>{
		announcementList.value = res.data
	})
}

const getBannerList = ()=>{
	request({
		url:'https://tea.qingnian8.com/api/bizhi/homeBanner',
	
	}).then(res=>{
		console.log(res);
		bannerList.value = res.data
	})
	
}

const getRecommandListByDate = ()=>{
	request({
		url:'https://tea.qingnian8.com/api/bizhi/randomWall',
	}).then(res=>{
		recommandList.value = res.data
	})
}


const getSubjectOptionsList = ()=>{
	request({
		url:'https://tea.qingnian8.com/api/bizhi/classify',
		data:{
			select:true
		}
	}).then(res=>{
		subjectItems.value = res.data.map(item=>({
			  typeId:item._id,
			  type: item.name,
			  image:item.picurl,
			  updateTime: item.updateTime,
			  ...item,
		  }))
	})
}
onLoad(()=>{
	getAnnouncementList()
	getBannerList()
	getRecommandListByDate()
	getSubjectOptionsList()
})
</script>

<style lang="scss" scoped>
  .home {
    .home-swiper {
      margin-top: -120rpx;
      padding: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .announcement {
      padding: 20rpx 40rpx;
      margin: 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #F9F9F9;
      border-radius: 60rpx;

      .left {
        color: $uni-color-primary;
        display: flex;
        align-items: center;


        .icon {
          width: 42rpx;
          height: 42rpx;
        }
      }

      .announcement-swiper {
        width: calc(100% - 280rpx);
        height: 60rpx;
        margin: 0 40rpx;

        .swiper-item {
          width: 100%;
          height: 100%;
          line-height: 60rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .subject-item {
      padding: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #1DB98B;

        .title {
          font-size: 36rpx;
          font-weight: bold;
          color: #000;
        }

      }
    }

    .recommand {

      .content {
        margin-top: 40rpx;

        .scroll-x-view {
          white-space: nowrap;

          view {
            display: inline;
            margin: 10rpx;

            &:nth-child(1) {
              margin-left: 0;
            }

            image {
              border-radius: 10rpx;
            }
          }
		  
        }
		
      }
    }

    .subject {
      .content {
        width: 100%;
        margin-top: 40rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 10rpx;
		.card-item{
			width: 225rpx;
			height: 345rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			// background: ;
			image{
				width: 100%;
				height: 100%;
			}
			view{
				position: absolute;
				inset: 0;
				margin: auto;
				color: #fff;
				font-size: 32rpx;
				display: flex;
				width: 100%;
				height: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: rgba(0,0,0,.3);
				backdrop-filter: blur(10px);
			}
		}
      }
    }
  }
</style>